<extend name="Extends/base"/>
<block name="title">信鸽列表</block>
<block name="css">
</block>
<block name="body_style">class="bgc-fff"</block>
<block name="body">
    <div class="pt30 plr20">
        <form id='myForm'>
            <div class="form-layout form-inline">

                <div class="control-group">
                    <label class="control-label c-t-right">环号：</label>
                    <div class="control-form">
                        <input type="text" class="input-text" name="cid"
                               placeholder="请输入环号模糊搜索" >
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label c-t-right">名字：</label>
                    <div class="control-form">
                        <input type="text" class="input-text" name="name"
                               placeholder="请输入名字模糊搜索" >
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label"><sub class="control-sub"></sub> 性别：</label>
                    <div class="control-form">
                        <div class="cus-sel cus-sel-h33" data-toggle="formSelect">
                            <div class="cus-sel-chosed">
                                <input type="text" name="sex" style="display:none;">
                                <span class="cus-sel-chosed-txt" data-value="">-请选择-</span>
                                <span class="jselect-icon"></span>
                            </div>
                            <div class="cus-sel-list" style="display: none;">
                                <ul>
                                    <li class="empty-sel"><a href="javascript:;" data-value="">-请选择-</a></li>
                                    <li class="empty-sel"><a href="javascript:;" data-value="1">雄</a></li>
                                    <li class="empty-sel"><a href="javascript:;" data-value="2">雌</a></li>
                                    <li class="empty-sel"><a href="javascript:;" data-value="3">未知</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label"><sub class="control-sub"></sub> 羽色：</label>
                    <div class="control-form">
                        <div class="cus-sel cus-sel-h33" data-toggle="formSelect">
                            <div class="cus-sel-chosed">
                                <input type="text" name="color" style="display:none;">
                                <span class="cus-sel-chosed-txt" data-value="">-请选择-</span>
                                <span class="jselect-icon"></span>
                            </div>
                            <div class="cus-sel-list" style="display: none;">
                                <ul>
                                    <li class="empty-sel"><a href="javascript:;" data-value="">-请选择-</a></li>
                                    <volist name="colorDic" id="vo">
                                        <li>
                                            <a href="javascript:;" data-value="{$vo.type}">{$vo.type}</a>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label"><sub class="control-sub"></sub> 眼砂：</label>
                    <div class="control-form">
                        <div class="cus-sel cus-sel-h33" data-toggle="formSelect">
                            <div class="cus-sel-chosed">
                                <input type="text" name="eye" style="display:none;">
                                <span class="cus-sel-chosed-txt" data-value="">-请选择-</span>
                                <span class="jselect-icon"></span>
                            </div>
                            <div class="cus-sel-list" style="display: none;">
                                <ul>
                                    <li class="empty-sel"><a href="javascript:;" data-value="">-请选择-</a></li>
                                    <volist name="eyeDic" id="vo">
                                        <li>
                                            <a href="javascript:;" data-value="{$vo.type}">{$vo.type}</a>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label c-t-right">血统：</label>
                    <div class="control-form">
                        <input type="text" class="input-text" name="bloodlines"
                               placeholder="请输入血统模糊搜索" >
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label c-t-right">做育者：</label>
                    <div class="control-form">
                        <input type="text" class="input-text" name="raiser"
                               placeholder="请输入做育者模糊搜索" >
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label c-t-right">出生日期：</label>
                    <div class="control-form">
                        <div class="date-wrap">
                            <input id="birthdayBegin" 
                                   type="text" 
                                   name="birthday_begin" value="" 
                                   class="date-txt datetimepicker" />
                        </div>
                        <span class="plr10">~</span>
                        <div class="date-wrap">
                            <input id="birthdayEnd"  
                                   type="text" 
                                   name="birthday_end" 
                                   value="" 
                                   class="date-txt datetimepicker" />
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label"><sub class="control-sub"></sub> 状态：</label>
                    <div class="control-form">
                        <div class="cus-sel cus-sel-h33" data-toggle="formSelect">
                            <div class="cus-sel-chosed">
                                <input type="text" name="sales_status" style="display:none;">
                                <span class="cus-sel-chosed-txt" data-value="">-请选择-</span>
                                <span class="jselect-icon"></span>
                            </div>
                            <div class="cus-sel-list" style="display: none;">
                                <ul>
                                    <li><a href="javascript:;" data-value="">-请选择-</a></li>
                                    <li><a href="javascript:;" data-value="-1">未上架</a></li>
                                    <li><a href="javascript:;" data-value="1">展售中</a></li>
                                    <li><a href="javascript:;" data-value="2">已出售</a></li>
                                    <li><a href="javascript:;" data-value="3">已死亡</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-layout form-inline">
                <div class="control-group">
                    <label class="control-label"><sub class="control-sub"></sub> 父亲：</label>
                    <div class="control-form">
                        <input type="hidden"  name="father_id" value="">
                        <div class="cus-sel cus-sel-w300 cus-sel-h33" id="fatherInputSel">
                            <div class="cus-sel-chosed">
                                <input type="text" 
                                       name="search" 
                                       data-tname="father_id" 
                                       class="c-hide" 
                                       value="" 
                                       data-sex="1,3"
                                       placeholder="请输入环号和名字模糊搜索">
                                <span class="jselect-icon"></span>
                            </div>
                            <div class="cus-sel-list c-hide">
                                <ul></ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label"><sub class="control-sub"></sub> 母亲：</label>
                    <div class="control-form">
                        <input type="hidden"  name="mother_id" value="">
                        <div class="cus-sel cus-sel-w300 cus-sel-h33" id="motherInputSel">
                            <div class="cus-sel-chosed">
                                <input type="text" 
                                       name="search" 
                                       data-tname="mother_id" 
                                       class="c-hide" 
                                       value="" 
                                       data-sex="2,3"
                                       placeholder="请输入环号和名字模糊搜索">
                                <span class="jselect-icon"></span>
                            </div>
                            <div class="cus-sel-list c-hide">
                                <ul></ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label c-t-right">客户信息：</label>
                    <div class="control-form">
                        <input type="text" class="input-text input-text-w350" name="client_info"
                               placeholder="请输入客户信息模糊搜索" >
                    </div>
                </div>

                <div class="control-group">
                    <a href="javascript:;" class="c-btn c-btn-blue mr10 search-btn">查询信鸽</a>
                    <a href="javascript:;"
                       class="add-pigeon c-btn c-btn-green mr10">新增信鸽</a>
                </div>
            </div>
        </form>

        <div class="c-nodata pt100 c-t-center">
            <img src="__PC__/images/nodata.png">
            <p class="pt30 c-f14 msg"></p>
        </div>

        <div id="myList" class="c-hide">
        </div>
    </div>
</block>
<block name="js">

    <script type="text/javascript">
        var inputSelLoadingHtml = '<li style="display: block;padding-top:50px;text-align:center">\
                <img src="__CST__/images/loading.gif">\
            </li>';

        var currPage = 1;
        $(function () {
            //生日开始时间控件初始化
            $('#birthdayBegin').datetimepicker({
                format: 'Y-m-d',
                onShow: function () {
                    this.setOptions({
                        maxDate: $('#birthdayEnd').val() ? $('#birthdayEnd').val() : false
                    })
                },
                timepicker: false
            });
            //生日结束时间控件初始化
            $('#birthdayEnd').datetimepicker({
                format: 'Y-m-d',
                onShow: function () {
                    this.setOptions({
                        minDate: $('#birthdayBegin').val() ? $('#birthdayBegin').val() : false
                    })
                },
                timepicker: false
            });

            getPigeonList(currPage);

        });


        /**
         * 搜索输入下拉初始化
         */
        $("#fatherInputSel,#motherInputSel").inputSelect({
            "isInputEnabled": true,
            "isFilter": false,
            "defaultText": "",
            "onInputBlur": function (t) {
                //失去焦点后判断是不是选择的结果，不是清空
                setTimeout(function () {
                    var tname = $(t).attr("data-tname");
                    var val = $("#myForm input[name=" + tname + "]").val();
                    if (!val) {
                        $(t).val("");
                    }
                }, 200);
            }
        }, "", function (t, val, key) {
            var tname = $(t).find("input").attr("data-tname");
            $("#myForm input[name=" + tname + "]").val(key);
        });

        /**
         * 搜索父母信鸽列表
         * @type type
         */
        var inputOrgVal = {};
        $("#fatherInputSel,#motherInputSel").on("input", "input[name=search]", function () {
            var tname = $(this).attr("data-tname");
            $("#myForm input[name=" + tname + "]").val("");

            var keyword = $.trim($(this).val());
            var sex = $(this).attr("data-sex");

            //相同的值不再重复搜索
            if (inputOrgVal[tname] == keyword) {
                false;
            }

            var searchData = {
                "keyword": keyword,
                "sex": sex
            };

            var $ul = $(this).parents('.cus-sel').find("ul");
            $ul.html(inputSelLoadingHtml);

            doSearchParentList(searchData, function (res) {

                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }

                var html = res.Result.html;
                $ul.html(html);
                inputOrgVal[tname] = keyword;
            }, false);

        });


        /**
         * 点击搜索
         */
        $(document).on('click', '.search-btn', function () {
            getPigeonList(currPage = 1);
        });

        /**
         * 点击分页
         */
        $(document).on('click', '.my-page li a', function () {
            var page = $(this).attr('data-page');
            if (!page) {
                return false;
            }

            var total = $('.my-page').attr('data-total');
            if (parseInt(page) > parseInt(total)) {
                page = total;
            }
            getPigeonList(currPage = page);
        });

        /**
         * 查看赛鸽明细按钮
         */
        $(document).on('click', ".detail-pigeon", function () {
            var id = $(this).attr("data-id");
            if (!id) {
                $.toast("数据异常，无法编辑");
                return false;
            }
            detailPigeon(id);
        });

        /**
         * 生成族谱
         */
        $(document).on("click", '.pr_img', function () {
            var id = $(this).attr("data-id");
            if (!id) {
                $.toast("数据异常，无法生成族谱");
                return false;
            }
            getPRImg(id, 0);

            function getPRImg(id, type) {
                doGetPRImg(id, type, function (res) {
                    if (res.Code != 10000) {
                        $.toast(res.Message);
                        return false;
                    }
                    var url = res.Result;
                    var html = "<div class='pr-cont-wmp c-t-center mb20'>";
                    if (type == 1) {
                        html += "<a href='javascript:;' data-type='0' class='pr-type-btn c-btn c-btn-green mr10'>简洁模式</a>";
                    } else {
                        html += "<a href='javascript:;'  data-type='1' class='pr-type-btn c-btn c-btn-green mr10'>丰满模式</a>";
                    }
                    html += "<a href='" + url + "' download='" + url + "' class='c-btn c-btn-white'>保存图片</a>";
                    html += "</div><div class='c-border-b c-border-d width-100 mtb30'></div>";
                    html += "<img src='" + url + "' height='100%'>";
                    var idx = $.alert(html, {
                        "lock": true,
                        "width": '100%',
                        "height": '100%',
                        "left": '0%',
                        "top": '0%',
                        "fixed": true,
                        "resize": false,
                        "drag": false,
                        "title": '查看族谱',
                        "ok": false,
                        "overflow": true,
                        "init": function () {
                            $(".pr-cont-wmp").on("click", ".pr-type-btn", function () {
                                var type = $(this).attr("data-type");
                                getPRImg(id, type)
                                idx.close();
                            })
                        }
                    });
                });
            }
        })

        /**
         * 添加赛鸽按钮
         */
        $(document).on('click', ".add-pigeon", function () {
            addPigeon();
        });
        /**
         * 编辑赛鸽
         */
        $(document).on("click", ".edit-pigeon", function () {
            var id = $(this).attr("data-id");
            if (!id) {
                $.toast("数据异常，无法编辑");
                return false;
            }
            editPigeon(id);
        });
        /**
         * 删除信鸽
         */
        $(document).on('click', '.del-btn', function () {
            var id = $(this).attr('data-id');
            if (!id) {
                $.toast("信鸽数据异常");
                return false;
            }
            $.alert("是否确定删除信鸽。", {
                "ok": function () {
                    doDelPigeon(id, function (res) {
                        if (res.Code != 10000) {
                            $.toast(res.Message);
                            return false;
                        }
                        $.toast("删除成功", 1000, function () {
                            getPigeonList(currPage);
                        })
                    });
                }
            })
        });
        /**
         * 点击上传图片
         */
        $(document).on("click", ".upload-img", function () {
            var $t = $(this);
            var $input = $t.parents(".fileupload-wrap").find("input[type=hidden]");
            $.imgUpload(function (res) {
                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }

                var url = res.Result.url;
                $input.val(url);
                var html = '\
                    <div class="upload-img-show c-position-r" style="height:130px; width:90px;">\
                        <img src="' + url + '" class="upload-img-obj" style="width:90px;" />\
                        <a href="javascript:;" class="c-position-a fileupload-img-del">\
                            <i class="iconfont">\
                                <img class="close-img" src="/pigeonSys/Public/Console/images/closebtn.png" width="20">\
                            </i>\
                        </a>\
                    </div>'

                $t.replaceWith(html);
                $('.upload-img-obj').zoomify();
            });
        });
        /**
         * 点击删除图片
         */
        $(document).on("click", ".close-img", function () {
            var $wrap = $(this).parents(".upload-img-show");
            var $input = $(this).parents(".fileupload-wrap").find("input[type=hidden]");
            $input.val("");
            var html = '\
                <span class="upload-img btn-file btn-file-3 fileinput-button">\
                    <i class="c-f22" >+</i>\
                </span>';
            $wrap.replaceWith(html);
        });
        /**
         * 选择框点击
         */
        $(document).on("click", "label.checkbox", function () {
            var tName = $(this).attr("t-name");
            if (!tName) {
                return false;
            }
            var val = 0;
            if ($(this).hasClass("checked")) {
                val = 1;
            }

            $(this).parents("form").find("input[name=" + tName + "]").val(val);
        });
        /**
         * 获取信鸽列表
         * @param {type} page
         * @param {type} callback
         * @returns {undefined}
         */
        function getPigeonList(page, callback) {
            if (typeof callback != "function") {
                callback = emptyFunc;
            }
            var data = getFormData();
            page = page ? page : 1;
            data.page = page;
            doGetPigeonList(data, function (res) {
                if (res.Code != 10000) {
                    showErr(res.Message);
                    $('#myList').hide();
                    callback(res);
                    return false;
                }

                $('#myList').show().html(res.Result.html);
                hideErr();
                callback(res);
            })
        }


        /**
         * 显示页面错误页面
         * @param msg
         */
        function showErr(msg) {
            $('.c-nodata').show().find('.msg').html(msg);
        }

        /**
         * 隐藏错误页面
         */
        function hideErr() {
            $('.c-nodata').hide().find('.msg').text('');
        }
    </script>
</block>

<block name="jsFile">

    <!--上传图片样式-->
    <link rel="stylesheet" href="__PC__/widget/fileUpload/9.11.2/css/jquery.fileupload.min.css" type="text/css" />
    <!--日期控件-->
    <link rel="stylesheet" href="__PC__/widget/datetimepicker/2.1.9/css/jquery.datetimepicker.min.css?v={:C('JS_CSS_VERSION')}" type="text/css" />
    <script type="text/javascript" src="__PC__/widget/datetimepicker/2.1.9/js/jquery.datetimepicker.min.js?v={:C('JS_CSS_VERSION')}"></script>
    <!--输入下拉列表-->
    <script type="text/javascript" src="__PC__/widget/inputSelect/1.0/js/inputSelect.js?v={:C('JS_CSS_VERSION')}"></script>

    <!--添加控制js-->
    <script type="text/javascript" src="__CST__/js/pigeon.add.logic.js?v={:C('JS_CSS_VERSION')}"></script>
    <!--编辑控制js-->
    <script type="text/javascript" src="__CST__/js/pigeon.edit.logic.js?v={:C('JS_CSS_VERSION')}"></script>

    <!--明细控制js-->
    <script type="text/javascript" src="__CST__/js/pigeon.detail.logic.js?v={:C('JS_CSS_VERSION')}"></script>

    <!--图片上传-->
    <script type="text/javascript" src="__CST__/js/imgUpload.js?v={:C('JS_CSS_VERSION')}"></script>

    <!--图像展示-->
    <link rel="stylesheet" href="__PC__/widget/zoomify/zoomify.css?v={:C('JS_CSS_VERSION')}" type="text/css" />
    <script type="text/javascript" src="__PC__/widget/zoomify/zoomify.js?v={:C('JS_CSS_VERSION')}"></script>


    <script type="text/javascript" src="__CST__/js/api.js?v={:C('JS_CSS_VERSION')}"></script>
    <script type="text/javascript" src="__CST__/js/pigeon.api.js?v={:C('JS_CSS_VERSION')}"></script>
</block>

